import fs from 'fs'
let arg = process.argv.splice(2)
console.log(arg)
let template = `
<template>
    <div class="page-box">
        <TemplateVue :insert="true" :table="tableData" :list="searchList" @search="onSearch" @reset="onReset" :pagination="pagination"
            @paginationChange="onPaginationChange" @paginationSize="onPaginationSize">
            <template #add><el-button @click="onSkip">新增协议</el-button></template>
            <template #btn="{ index }">
                <el-button >查看</el-button>
            </template>
            <template #switch="{ index, row }">
                <el-switch v-model="row.status" inline-prompt active-text="启用" inactive-text="禁用"
                    @change="onStatusChange(row.id, row.status)" />
            </template>
        </TemplateVue>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue"
import TemplateVue from "@/components/template/Index.vue"
import { searchItemInterface } from "@/components/search/index"
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
//默认分页
const pagination = reactive({
    pageNo: 1,
    pageSize: 10,
    total: 0
})

const searchList: Array<searchItemInterface | string> = [{ key: "name", name: "协议名称", type: "select", options: [] }]

//表格数据接口
interface DataInterface {
    data: any[],
    describe: any[],
    selection: boolean
}
//表格数据
const tableData: DataInterface = reactive({
    data: [],
    describe: [],
    selection: false
})


const onSearch = (res: any) => {
    console.log(res)
    getData(res.name)
}
const onReset = () => {
    console.log('重置')
    pagination.pageNo = 1
    getData()
}
const onPaginationChange = (index: number) => {
    console.log('index', index)
}
//监听选择每页显示个数
const onPaginationSize = (size: number) => {
    pagination.pageNo = 1
    pagination.pageSize = size
    getData()
}

//实例化路由
const router = useRouter()
const onSkip = () => {
    router.push({
        path: '/system/protocol/edit', query: { type: 'add' }
    })
}


//监听用户某个switch 开关
const onStatusChange = (id: string, status: boolean) => {
    
}
//对于表格数据lable
const TABLE_PROP_NAME = {
    name = "协议名称",
    createBy = "创建人",
    type = "应用渠道",
    version = "版本",
    createTime = "创建时间",
    status = "状态",
}

//获取协议分页数据
const getData = (code: string = '') => {
  
}

//页面挂载完成
onMounted(() => {
    getData()
    tableData.describe.length = 0
    for (const key in propName) {
        tableData.describe.push({
            prop: key,
            label: propName[key as keyof typeof propName],
            switch: key == 'status' ? true : false,
            operation: false,
        })
    }
    tableData.describe.push({
        prop: '操作',
        label: '操作',
        switch: false,
        operation: true,
    })
})


</script>

<style scoped lang="scss">
.page-box {
    background-color: #fff;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 8px;
}
</style>
`

fs.writeFile(arg[0], template, err => {
    if (err) {
        console.log(err)
    } else {
        console.log('创建完成')
    }
})
